<template>
  <div>
    <el-card v-for="(d, i) in dataList" :key="d.formItemId">
      <div slot="header">
        <h4 class="left-border">{{ i + 1 + '.' + d.text }}</h4>
      </div>
      <div>
        <template v-for="(detail, index) in d.detailList">
          <el-badge :value="detail.count" v-if="detail.count > 1" :key="index" style="margin-left: 15px">
            <el-tag>
              {{ detail.text }}
            </el-tag>
          </el-badge>
          <el-tag v-else :key="index" style="margin-left: 15px">
            {{ detail.text }}
          </el-tag>
        </template>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'FormItemTextList',
  props: ['dataList'],
  data() {
    return {}
  }
}
</script>

<style scoped>
.left-border {
  border-left: 5px blue solid;
  padding-left: 10px;
}
</style>
